<extend name="./Public/base" />
<block name="title">测试</block>
<block name="head">
    <load href="__PUBLIC__/Css/quiz.css"/>
    <load href="__PUBLIC__/Css/header.css"/>
</block>

<block name="header">
    <include file="Application/Home/View/Public/header_class.html" action="quiz"/>
</block>
<block name="main">
	<div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>
    <div class="container">
    	<div class="row">
    		<div class="col-md-10 col-md-offset-1">
    			<div class="release">
    				<a href="javasript:;"><span class="glyphicon glyphicon-edit"></span> 发布测试</a>
    			</div>
				<div class="panel panel-default" id="release-box">
					<div class="panel-body">
						<form class="form-horizontal">
							<div class="form-group">
                                <label class="col-sm-2 control-label">题目名称</label>
                                <div class="col-sm-10">
    			                    <input type="text" class="form-control quiz-name" v-model="qusName" placeholder="测试名称">
                                </div>
    						</div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">题目简介</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control quiz-remark" rows="2" v-model="qusRemark"> </textarea>
                                </div>
                            </div>
						</form>
					</div>
    				<div class="panel-footer">
    					<button class="btn btn-default btn-import-quiz" data-toggle="modal" data-target="#import-quiz-modal">从其他班级导入</button>
    					<button class="btn btn-primary pull-right btn-add-quiz" v-on:click="addQus">确定</button>
    					<button class="btn btn-default pull-right" id="btn-release-cancel" v-on:click="cancel">取消</button>
    				</div>
				</div>
    		</div>
    	</div>
        <if condition="$pageInfo['count'] lt 1">
            <div class="col-md-10 col-md-offset-1 display-hint">
                <p>点击上方按钮可以发布测试。</p>
            </div>
        </if>
        <volist name="quiz" id="quiz_item">
            <div class="row" value="{$quiz_item.qus_id}">
                <div class="col-md-10 col-md-offset-1">
                    <div class="panel panel-default quiz-box">
                        <div class="panel-body">
                            <div class="box-title">
                                <span class="text-muted">{$quiz_item.qus_create_time}</span>
                                <div class="dropdown pull-right">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-haspopup="true" aria-expanded="true">
                                        <span class="glyphicon glyphicon-option-vertical"></span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:;" class="menu-edit-quiz">编辑标题和简介</a></li>
                                        <li><a href="__MODULE__/TeaQuiz/question?qd={$quiz_item.qus_id}">编辑试题内容</a></li>
                                        <li><a href="javascript:;" class="menu-delete-quiz">删除</a></li>
                                    </ul>
                                </div>
                                <p class="pull-right">
                                    <if condition="$quiz_item.qus_status eq 0">
                                        未使用
                                    <elseif condition="$quiz_item.qus_status eq 1"/>
                                        已发布
                                    <elseif condition="$quiz_item.qus_status eq 2"/>
                                        已结束
                                    </if>
                                </p>
                            </div>
                            <div class="box-body">
                                <div class="box-body-left pull-left">
                                    <h4><a href="__MODULE__/TeaQuiz/question?qd={$quiz_item.qus_id}">{$quiz_item.qus_name}</a></h4>
                                    <p>{$quiz_item.qus_remark}</p>
                                </div>
                                <div class="box-body-right pull-right">
                                    <p class="pull-right">
                                        <a href="__MODULE__/QuizResult/grade?cad={$classInfo.cla_id}">{$quiz_item.lackNum}</a>
                                        <span href="" class="text-danger">未交</span>
                                    </p>
                                    <if condition="$quiz_item.qus_status eq 2">
                                        <p class="pull-right">
                                            <a href="__MODULE__/QuizResult/analyze?qd={$quiz_item.qus_id}">{$quiz_item.passNum}</a>
                                            <span href="" class="text-primary">及格</span>
                                        </p>
                                    </if>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default edit-box">
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">测试名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="测试名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">题目简介</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control edit-quiz-remark" rows="2" > </textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">
                            <button class="btn btn-primary pull-right btn-edit-quiz">确定</button>
                            <button class="btn btn-default pull-right btn-edit-cancel">取消</button>
                            <div style="clear:right"></div>
                        </div>
                    </div>
                </div>
            </div>
        </volist>
        <!-- count:课程个数 page:总页数 np:当前页数 -->
        <div class="row">
            <if condition="$pageInfo['page'] gt 1">
                <div class="col-md-3 col-md-offset-5">
                    <ul class="pagination">
                        <li><a href="__MODULE__/TeaQuiz/quiz?cad={$classInfo['cla_id']}&amp;np=1">&laquo;首页</a></li>
                        <if condition="$pageInfo['np']-1 gt 0">
                        <li><a href="__MODULE__/TeaQuiz/quiz?cad={$classInfo['cla_id']}&amp;np={$pageInfo['np']-1}">{$pageInfo['np']-1}</a></li>
                        </if>
                        <li class="active"><a href="javasript:;">{$pageInfo.np}</a></li>
                        <if condition="$pageInfo['np']+1 elt $pageInfo['page']">
                        <li><a href="__MODULE__/TeaQuiz/quiz?cad={$classInfo['cla_id']}&amp;np={$pageInfo['np']+1}">{$pageInfo['np']+ 1}</a></li>
                        </if>
                        <li><a href="__MODULE__/TeaQuiz/quiz?cad={$classInfo['cla_id']}&amp;np={$pageInfo.page}">末页&raquo;</a></li>
                    </ul> 
                </div>
            </if>
        </div>
    </div>
    <!-- 删除测试modal -->
    <div class="modal fade" id="del-quiz-modal" role="dialog" aria-labelledby="del-class">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title text-danger">删除试卷</h4>
                </div>
                <div class="modal-body">
                    <p>是否删除测试</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger btn-del">删除</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 导入试卷modal -->
    <div class="modal fade" id="import-quiz-modal" role="dialog" aria-labelledby="del-class">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">导入试卷</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3 col-md-offset-9">
                            <select class="form-control choose-course" v-on:change="reloadImportQuiz" v-model="selClass">
                                <option value="disable">选择一个班级</option>
                                <option v-for="cla in classes" v-bind:value="cla.cla_id">{{ cla.cla_name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row other-panels">
                        <template v-for="qus in quses">
                            <div class="col-md-4" v-on:click="chooseQus($index, $event)">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="glyphicon glyphicon-check"></span>
                                        <h4>{{ qus.qus_name }}</h4>
                                        <p>{{ qus.qus_remark }}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-import" v-on:click="importQus">导入</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        function initReleaseVm() {
            releaseVm = new Vue({
                el: "#release-box",
                data: {
                    qusName: "",
                    qusRemark: "",
                    qusId: "",
                    isFormImport: false,
                },
                methods: {
                    addQus: function() {
                        if (this.isFormImport) {
                            postApi("__MODULE__/TeaQuiz/importQuiz", {class_cla_id:"{$classInfo.cla_id}", qus_name:this.qusName,
                                qus_remark:this.qusRemark, qus_id:this.qus_id}, function(err, data) {
                                if (err) {
                                    showError(err.message);
                                } else {
                                    showSuccessReload(data.message);
                                }
                            });
                        } else {
                            postApi("__MODULE__/TeaQuiz/addQuiz", {class_cla_id:"{$classInfo.cla_id}", qus_name:this.qusName,
                                qus_remark:this.qusRemark}, function(err, data) {
                                if (err) {
                                    showError(err.message);
                                } else {
                                    showSuccessReload(data.message);
                                }
                            });
                        }
                    },
                    cancel: function() {
                        $(".release").show();
                        $("#release-box").hide();
                        this.isFormImport = false;
                        this.qusName = "";
                        this.qusRemark = "";
                        qusId =  "";
                    }
                }
            })
        }

        // 初始化其他班级
        function initImportVm(classes) {
            importVm.classes = classes;
        }

        $(function() {
            importVm = new Vue({
                el: "#import-quiz-modal",
                data: {
                    quses: {},
                    classes: [],
                    selClass: "disable",
                    chooseQusIndex: -1,
                },
                methods: {
                    reloadImportQuiz: function() {
                        if (this.selClass == "disable")
                            return;
                        postApi("__MODULE__/TeaQuiz/getOtherClassQuiz", {class_cla_id:this.selClass}, function(err, data) {
                            if (err) {
                                showError(err.message);
                            } else {
                                importVm.chooseQusIndex = -1;
                                importVm.quses = data.data;
                            }
                        });

                    },
                    importQus: function(event) {
                        if (this.chooseQusIndex == -1) {
                            showError("请选择一个试卷");
                            return;
                        }
                        releaseVm.qusName = this.quses[this.chooseQusIndex].qus_name;
                        releaseVm.qusRemark = this.quses[this.chooseQusIndex].qus_remark;
                        releaseVm.qusId = this.quses[this.chooseQusIndex].qus_id;
                        releaseVm.isFormImport = true;
                        $(this.$el).modal("toggle");
                    },
                    chooseQus: function(index, event) {
                        var objChoose = $(event.target).parents(".panel");
                        $(this.$el).find(".panel-heading").removeClass("panel-active");
                        $(this.$el).find(".panel-heading span").removeClass("active");
                        objChoose.find(".panel-heading").addClass("panel-active");
                        objChoose.find(".panel-heading span").addClass("active");
                        this.chooseQusIndex = index;
                    } 
                }

            })
        })

    	$(function() {

            //背景的设置
            var bg = $("#cla_id").val() % 5 + 1;
            $("#title img").prop("src","__PUBLIC__/Images/" + bg + ".jpg");
            //班级基本信息的显示
            $(".classInfo").css("opacity","1");

    		// 隐藏和显示发布题目面板
            var release_box = $("#release-box"),
                release = $(".release");
    		release_box.hide(); // 初始化vue对象
            initReleaseVm();
    		$(".release a").click(function() {
    			release.hide();
    			release_box.show();
    		});

            // 显示编辑试题面板
            $(".edit-box").hide();
            $(".menu-edit-quiz").click(function() {
                /*quiz_box.parent().append($(clone_release_box));
                $(clone_release_box).show();*/
                var quiz_box = $(this).parents(".quiz-box");
                quiz_box.hide();
                quiz_box.next().show();

                var cur_row = $(this).parents(".row")
                var old_name = cur_row.find(".box-body-left h4").text();
                var old_remark = cur_row.find(".box-body-left p").text();
                cur_row.find(".edit-quiz-name").val(old_name);
                cur_row.find(".edit-quiz-remark").val(old_remark);
                cur_row.find(".btn-edit-quiz").click(function() {
                    var quiz_name = cur_row.find(".edit-quiz-name").val();
                    var quiz_remark = cur_row.find(".edit-quiz-remark").val();
                    var quiz_id = cur_row.attr("value");
                    postApi("__MODULE__/TeaQuiz/updateQuiz", {qus_id:quiz_id, qus_name:quiz_name, 
                        qus_remark:quiz_remark}, function(err, data) {
                        if (err) {
                            showError(err.message);
                        } else {
                            showSuccessReload(data.message);
                        }
                    });
                }); 
                
            });

            $(".btn-edit-cancel").click(function() {
                var edit_box = $(this).parents(".edit-box");
                edit_box.hide();
                edit_box.prev().show();
            });

            var cur_qus = {};
            var del_modal = $("#del-quiz-modal");
            $(".menu-delete-quiz").click(function(){
                cur_qus.qus_id = $(this).parents(".row").attr("value");       //获得试卷的id
                cur_qus.qus_name = $(this).parents(".row").find(".box-body h4").text();
                postApi("__MODULE__/TeaQuiz/checkQuiz", {qus_id:cur_qus.qus_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        del_modal.modal("toggle");
                        del_modal.find(".modal-body p").text(data.message + " (" + cur_qus.qus_name + ")");
                    }
                });
            });

            del_modal.find(".btn-del").click(function() {
                del_modal.modal("toggle");
                postApi("__MODULE__/TeaQuiz/deleteQuiz", {qus_id:cur_qus.qus_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                    }
                });
            });

            $("#release-box .btn-import-quiz").click(function() {
                var cla_id = "{$classInfo.cla_id}";
                var cou_id = location.search.substring(1).split("&")[0].split("=")[1];
                postApi("__MODULE__/TeaQuiz/getOtherClassInfo", {cla_id:cla_id, cou_id:cou_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        initImportVm(data.data);
                    }
                });
            });
    	});
    </script>
</block>